<script setup>
import { useUserInfoQuery } from '@/composables/useUserInfoQuery'
import { userCenterStore } from '@/stores/userCenterStore'
import { useRouter } from 'vue-router'
import FollowButton from '@/components/FollowButton.vue'

const props = defineProps({
  userId: Number,
})

const emit = defineEmits(['close'])

const router = useRouter()

const { userInfo } = useUserInfoQuery(props.userId)

const handleShowUserCenter = () => {
  navToUserHome(0)
  emit('close')
}

const navToUserHome = (activeIndex) => {
  router.push(`/user/${props.userId}`)
  userCenterStore().setActiveIndex(activeIndex)
}
</script>

<template>
  <div class="w-[360px] h-fit bg-[--fill-0] rounded-md shadow-lg overflow-hidden">
    <!-- 顶部背景 -->
    <div class="h-[110px] relative bg-[#16437C]">
      <img
        :src="userInfo?.bgImg"
        style="height: 100%!important"
        class="w-full h-full object-cover" />
    </div>

    <div class="-translate-y-[55px] p-4">
      <!-- 用户信息区域 -->
      <div class="flex justify-between items-end">
        <div class="relative w-[80px] h-[80px] rounded-full border-[--line-0] border-4 overflow-hidden group">
          <img :src="userInfo?.avatar" class="object-cover cursor-pointer" style="height: 100%!important" />

          <div
            @click="handleShowUserCenter"
            class="cursor-pointer opacity-0 absolute right-0 top-0 bg-[#00000060] text-[--text-0] w-full h-full flex-cc group-hover:opacity-100 transition-opacity duration-200 flex-col text-sm">
            <div>个人</div>
            <div>主页</div>
          </div>
        </div>
        <div class="flex gap-[30px]">
          <div @click="navToUserHome(2)" class="flex items-center gap-1 cursor-pointer">
            <div class="text-sm font-medium">{{ userInfo?.follow }}</div>
            <div class="text-[--text-3] text-sm">关注</div>
          </div>
          <div @click="navToUserHome(1)" class="flex items-center gap-1 cursor-pointer">
            <div class="text-sm font-medium">{{ userInfo?.fans }}</div>
            <div class="text-[--text-3] text-sm">粉丝</div>
          </div>
          <div @click="navToUserHome(0)" class="flex items-center gap-1 cursor-pointer">
            <div class="text-sm font-medium">{{ userInfo?.postNum }}</div>
            <div class="text-[--text-3] text-sm">帖子</div>
          </div>
        </div>
      </div>
      <div class="flex justify-between items-start mb-[-50px]">
        <!-- 用户名和简介 -->
        <div class="px-4 py-1">
          <div class="text-2xl font-medium">{{ userInfo?.username }}</div>
          <div class="flex gap-2 text-xs text-[--text-3]">
            <div>{{ userInfo?.gender === 0 ? '男' : userInfo?.gender === 1 ? '女' : '保密' }}</div>
            <!-- <div>IP属地：{{ userInfo?.city }}</div> -->
          </div>
          <div class="flex gap-2 text-xs text-[--text-3] my-1 flex-wrap">
            <div v-for="tag in userInfo?.tagStr" :key="tag" class="px-2 py-1 bg-[--fill-3] rounded-full">{{ tag }}</div>
          </div>
          <div class="text-sm">{{ userInfo?.intro || '这个人很懒，什么都没留下' }}</div>
        </div>

        <div class="flex items-center gap-[98px] flex-shrink-0 mt-2">
          <FollowButton :isFollow="userInfo?.isFollow" :id="props.userId" />
        </div>
      </div>
    </div>
  </div>
</template>
